<template>
  <div class="cart">
    <p class="cart-title">购物车</p>
    <div class="cartList">
      <div class="goods" v-for="item in carts">
        <div class="sel"><input type="checkbox" v-model="item.checked" /></div>

        <div class="goodsImg" @click="toDetail(item.product.id)">
          <img :src="dalImg(item.product.coverImage)" alt="" />
        </div>

        <div class="detail">
          <div class="del" @click="delFromCart(item.id)">×</div>
          <p class="goodsName" @click="toDetail(item.product.id)">
            {{ item.product.name }}
          </p>

          <p class="type"></p>

          <div class="num">
            <div class="price">￥{{ item.price }}</div>
            <div class="count">
              <Stepper
                v-model="item.amount"
                disable-input
                @plus="addToCart(item.product, 1)"
                @minus="addToCart(item.product, -1)"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <MayLike></MayLike>
    <!--  vant组件总价 -->
    <submit-bar
      :price="sumPrice"
      button-text="提交订单"
      @submit="onSubmit"
      style="bottom: 52px"
    >
      <Checkbox v-model="chkAll">全选</Checkbox>
    </submit-bar>
  </div>
</template>

<script setup>
import { SubmitBar, Checkbox, CheckboxGroup, Stepper, Toast } from "vant";
import { ref, computed, inject } from "vue";
import { useRouter } from "vue-router";
import {
  addToCartAPI,
  loadCartAPI,
  delFromCartAPI,
} from "../services/shop-carts";
import { dalImg } from "../utils/tools";
import MayLike from "../components/MayLike.vue";

const cartCount = inject("cartCount");
// const checked = ref(true);
const carts = ref([]);
const router = useRouter();

const onSubmit = () => Toast("订单已提交");
// const onClickLink = () => Toast("修改地址");

//获取购物车数据
const loadDataFromServer = () => {
  loadCartAPI().then((res) => {
    // console.log(res);
    carts.value = res.data
      .filter((item) => item.product) // 过滤数据，选择那些有商品信息的数据
      .map((item) => ({ ...item, checked: false }));

    // 加载完数据之后需要重新设置购物车中数据的数量
    cartCount.value = carts.value.reduce((pre, cur) => pre + cur.amount, 0);
    // console.log(res.data);
  });
};

loadDataFromServer();

// 计算属性
const chkAll = computed({
  // 主动设置值
  set(v) {
    carts.value.forEach((item) => (item.checked = v));
  },
  // 被动取值
  get() {
    return carts.value.every((item) => item.checked);
  },
});

// 总价计算
const sumPrice = computed(() => {
  return (
    carts.value
      .filter((item) => item.checked) // 获取选中的
      .reduce((pre, cur) => pre + cur.amount * cur.product.price, 0) * 100
  );
});

/**
 * 改变购物车中商品的数量
 * @param {*} item    商品
 * @param {*} amount  数量变化 1表示加 -1表示减
 */
const addToCart = async (item, amount) => {
  // 加入购物车的时候需要改变数据
  cartCount.value += amount;

  await addToCartAPI({
    product: item.id,
    amount,
    price: item.price,
  });
};

// 删除购物车数据
const delFromCart = async (id) => {
  await delFromCartAPI(id);
  loadDataFromServer();
};

//跳转详情页
const toDetail = (id) => {
  router.push({
    name: "Detail",
    query: {
      id,
    },
  });
};
</script>

<style scoped lang="scss">
.cart {
  padding-bottom: 40px;
  .cart-title {
    font-size: 24px;
    margin: 10px 0 0 20px;
  }
  .cartList {
    margin: 10px auto 150px auto;
    width: 92vw;
    min-height: 300px;
    background-color: #fff;
    border-radius: 10px;
    .goods {
      height: 120px;

      .sel {
        float: left;
        width: 32px;
        height: 100px;
        input {
          width: 20px;
          height: 20px;
          margin-top: 48px;
          margin-right: 8px;
          margin-left: 8px;
        }
      }
      .goodsImg {
        float: left;
        width: 72px;
        height: 72px;
        margin: 24px 10px 0 0;
        img {
          height: 72px;
          width: 72px;
        }
      }
      .detail {
        float: left;
        width: 66%;
        .del {
          font-size: 20px;
          height: 16px;
          width: 16px;
          border-radius: 50%;
          // border: solid 1px #777;
          color: #ddd;
          float: right;
        }
        .goodsName {
          margin-top: 20px;
          height: 40px;
          line-height: 19px;
          font-size: 14px;
          // font-weight: bold;
        }
        .type {
          height: 17px;
          margin: 3px 0;
        }
        .num {
          width: 100%;

          height: 24px;
          .price {
            line-height: 24px;
            float: left;
            color: rgb(203, 64, 64);
            font-size: 16px;
          }
          .count {
            float: right;
          }
        }
      }
    }
  }
}
</style>
